<!-- 考核纬度设置 -->
<template>
  <a-drawer
    width="40%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> 新增考核维度 </template>
    <div>
      <a-form
        :model="formData.data"
        ref="refForm"
        auto-label-width
        :rules="rules"
      >
        <a-form-item label="维度名称" field="name" show-colon>
          <a-input v-model="formData.data.name"> </a-input>
        </a-form-item>
        <a-form-item label="考核工具" field="tool" show-colon>
          <template #label>
            <span>考核工具</span>
            <a-tooltip
              content="注：可以根据不同的考核维度选择考核工具，在当前考核，每一个考核工具，只可选取一次，一经被使用，新增维度的时候则该考核工具为不可选取状态。关键业绩考核(KPI)与目标与关键成果法(OKR)存在互斥关系，在
同一个考核中，只能选择一个"
            >
              <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model="formData.data.tool"
            @change="formData.data.weight = 0"
          >
            <a-radio :disabled="props.selectedTools.includes(1)" :value="1"
              >关键业绩考核(KPI)</a-radio
            >
            <a-radio :disabled="props.selectedTools.includes(2)" :value="2"
              >能力素质考核(BPI)</a-radio
            >
            <a-radio :disabled="props.selectedTools.includes(3)" :value="3"
              >工作计划考核(PPI)</a-radio
            >
            <a-radio :disabled="props.selectedTools.includes(4)" :value="4"
              >目标与关键成果法(OKR)</a-radio
            >
            <a-radio :disabled="props.selectedTools.includes(5)" :value="5"
              >加减分项
              <a-tooltip
                content="注：加减分项考核工具，作为特殊的考核工具，选择该
工具时，只要被考核者触发了该考核工具的考核标准，
就根据条件进行减分，该分项不受总分上限限制。"
              >
                <icon-info-circle-fill
                  style="color: #165dff; font-size: 16px"
                /> </a-tooltip
            ></a-radio>
            <a-radio :value="6" :disabled="props.selectedTools.includes(6)"
              >否决指标法(0-1)
              <a-tooltip
                content="注：否决指标法考核工具，作为特殊的考核工具，选
择该工具时，设置的指标就会直接关系到，该考核是
否会直接被拒绝通过，或直接通过"
              >
                <icon-info-circle-fill
                  style="color: #165dff; font-size: 16px"
                />
              </a-tooltip>
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="纬度权重"
          field="weight"
          show-colon
          v-if="formData.data.tool !== 5 && formData.data.tool !== 6"
          :tooltip="`最大权重不能超过${
            100 -
            props.maxWeight +
            (props?.currLatitudeData?.weight
              ? props?.currLatitudeData?.weight
              : 0)
          }`"
        >
          <template #label>
            <span>纬度权重</span>
            <a-tooltip
              content="注：在设置了总分计算方式为加权计算，且选取的考核工具为：关键业绩考核(KPI)、能力素质考核(BP)、工作
计划考核(PP)、目标与关键成果法(OKR)的情况下，需要设置维度权重，且权重总和为100%。加减分项、否决指标法无法设置维度权重"
            >
              <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
            </a-tooltip>
          </template>
          <a-input-number
            v-model="formData.data.weight"
            hide-button
            :min="0.01"
            :precision="2"
            allow-clear
            :max="
              100 -
              props.maxWeight +
              (props?.currLatitudeData?.weight
                ? props?.currLatitudeData?.weight
                : 0)
            "
          >
            <template #suffix>
              <div>%</div>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item label="备注" field="remark" show-colon>
          <a-textarea
            v-model="formData.data.remark"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 3
            }"
          >
          </a-textarea>
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button type="primary" @click="continueAdd">确认并继续新增</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    currLatitudeData: any; // 传进来的数据
    selectedTools: number[]; // 已经选择的工具
    maxWeight: number; // 判断还能选择多大的weight
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'latitudeEmit']);

let refForm = ref();

const formData = reactive({
  data: {
    name: '', // 纬度名称
    /*
      1 关键业绩考核
      2 能力素质考核
      3 工作计划考核
      4 目标与关键成果法
      5 加减分项
      6 否决指标法
    */
    tool: undefined, // 考核工具
    weight: 0, // 维度权重
    remark: '', // 备注
    addition: 2 // 允许员工新增指标 1是 2否
  }
});

const originData = {
  name: '', // 纬度名称
  /*
      1 关键业绩考核
      2 能力素质考核
      3 工作计划考核
      4 目标与关键成果法
      5 加减分项
      6 否决指标法
    */
  tool: undefined, // 考核工具
  weight: 0, // 维度权重
  remark: '', // 备注
  addition: 2 // 允许员工新增指标 1是 2否
};

// 校验权重
const validateWeight = (val: number, cb: any) => {
  if (
    props.maxWeight -
      (props?.currLatitudeData?.weight
        ? props?.currLatitudeData?.weight
        : 0) ===
    100
  )
    cb('权重总和已经达到100，若要继续新增该工具请先调整其他工具的权重!');
};

const rules = {
  name: [
    {
      required: true,
      message: '请输入'
    }
  ],
  tool: [
    {
      required: true,
      message: '请选择'
    }
  ],
  weight: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateWeight
    }
  ]
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      if (props.currLatitudeData) {
        formData.data = cloneDeep(props.currLatitudeData);
      } else {
        formData.data = cloneDeep(originData);
      }
      console.log('====================================');
      console.log(formData.data);
      console.log('====================================');
    } else {
      formData.data = cloneDeep(originData);
    }
  }
);

const toolsChange = (val: number[]) => {
  console.log(formData.data.tool);
};

const handleOk = async () => {
  if (await refForm.value.validate()) return;
  emits('latitudeEmit', cloneDeep(formData.data));
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};

const continueAdd = async () => {
  if (await refForm.value.validate()) return;
  emits('latitudeEmit', formData.data);
  formData.data = cloneDeep(originData);
  emits('update:visible', true);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
